<template>
  <div id="echartsConfig" class="h-full">
    <a-spin :spinning="!loadComplate">
      <a-row>
        <a-col :span="20" style="padding: 0; background-color: #cad3db">
          <div
            class="panel panel-default"
            id="eip-echarts-panel"
            style="margin: 4px"
          >
            <div
              ref="eipContainer"
              class="eip-echarts-container"
              :style="{ height: height }"
              style="padding: 4px"
            ></div>
          </div>
        </a-col>

        <a-col :span="4" style="padding: 0; background-color: #cad3db">
          <div class="panel panel-default h-full" style="margin: 4px 4px 4px 0">
            <div class="panel-body option">
              <div
                id="report-echarts-option"
                class="beauty-scroll"
                :style="{ height: height }"
                style="overflow-y: scroll"
              >
                <a-collapse>
                  <a-collapse-panel key="1" header="工具栏">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>数据视图：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.feature.dataView.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>重置：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.feature.restore.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>数据缩放视图：</td>
                            <td>
                              <a-checkbox
                                v-model="option.toolbox.feature.dataZoom.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>保存图片：</td>
                            <td>
                              <a-checkbox
                                v-model="
                                  option.toolbox.feature.saveAsImage.show
                                "
                              ></a-checkbox>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="2" header="图例">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>水平对齐：</td>
                            <td>
                              <button
                                @click="option.legend.left = 'left'"
                                type="button"
                                :class="{
                                  active: option.legend.left == 'left',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-left"></a-icon>
                              </button>
                              <button
                                @click="option.legend.left = 'center'"
                                type="button"
                                :class="{
                                  active: option.legend.left == 'center',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-center"></a-icon>
                              </button>
                              <button
                                @click="option.legend.left = 'right'"
                                type="button"
                                :class="{
                                  active: option.legend.left == 'right',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-right"></a-icon>
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>排列方式：</td>
                            <td>
                              <button
                                @click="option.legend.orient = 'horizontal'"
                                type="button"
                                :class="{
                                  active: option.legend.orient == 'horizontal',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="column-width" />
                              </button>
                              <button
                                @click="option.legend.orient = 'vertical'"
                                type="button"
                                :class="{
                                  active: option.legend.orient == 'vertical',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="column-height" />
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.legend.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr></tr>
                          <tr>
                            <td>字体颜色：</td>
                            <td style="width: 200px">
                              <eip-color
                                :value="option.legend.textStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.legend.textStyle.color = value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>
                          <tr>
                            <td>垂直对齐：</td>
                            <td>
                              <button
                                @click="option.legend.top = 'top'"
                                type="button"
                                :class="{ active: option.legend.top == 'top' }"
                                class="btn btn-default btn-xs"
                              >
                                上
                              </button>
                              <button
                                @click="option.legend.top = 'middle'"
                                type="button"
                                :class="{
                                  active: option.legend.top == 'middle',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                中
                              </button>
                              <button
                                @click="option.legend.top = 'bottom'"
                                type="button"
                                :class="{
                                  active: option.legend.top == 'bottom',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                下
                              </button>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="3" header="滚动条">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.dataZoom.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>开始：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.dataZoom.start"
                                placeholder="数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>结束：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.dataZoom.end"
                                placeholder="数据窗口范围的结束百分比。范围是：0 ~ 100。表示 0% ~ 100%。"
                              />
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="4" header="标题">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>标题内容：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.title.text"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.title.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>水平对齐：</td>
                            <td>
                              <button
                                @click="option.title.left = 'left'"
                                type="button"
                                :class="{ active: option.title.left == 'left' }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-left"></a-icon>
                              </button>
                              <button
                                @click="option.title.left = 'center'"
                                type="button"
                                :class="{
                                  active: option.title.left == 'center',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-center"></a-icon>
                              </button>
                              <button
                                @click="option.title.left = 'right'"
                                type="button"
                                :class="{
                                  active: option.title.left == 'right',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-right"></a-icon>
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>颜色：</td>
                            <td>
                              <eip-color
                                :value="option.title.textStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.title.textStyle.color = value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>
                          <tr>
                            <td>字体：</td>
                            <td>
                              <select
                                class="form-control"
                                :value="option.title.textStyle.fontFamily"
                                v-model="option.title.textStyle.fontFamily"
                              >
                                <option value="微软雅黑">微软雅黑</option>
                                <option value="宋体">宋体</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>字号：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.title.textStyle.fontSize"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.title.textStyle.fontSize =
                                        option.title.textStyle.fontSize + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.title.textStyle.fontSize =
                                        option.title.textStyle.fontSize - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>粗体：</td>
                            <td>
                              <button
                                @click="
                                  option.title.textStyle.fontWeight == 'normal'
                                    ? (option.title.textStyle.fontWeight =
                                        'bold')
                                    : (option.title.textStyle.fontWeight =
                                        'normal')
                                "
                                type="button"
                                :class="{
                                  active:
                                    option.title.textStyle.fontWeight == 'bold',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <i class="fa fa-bold"></i>
                              </button>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="5" header="坐标系网格">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>下边距：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.grid.bottom"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.bottom =
                                        option.grid.bottom + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.bottom =
                                        option.grid.bottom - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>左边距：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.grid.left"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.left = option.grid.left + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.left = option.grid.left - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>右边距：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.grid.right"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.right = option.grid.right + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.right = option.grid.right - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>上边距：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.grid.top"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.top = option.grid.top + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.grid.top = option.grid.top - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="6" header="提示框">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>是否显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.tooltip.show"
                              ></a-checkbox>
                            </td>
                          </tr>

                          <tr>
                            <td>提示类型：</td>
                            <td>
                              <select
                                class="form-control"
                                :value="option.tooltip.trigger"
                                v-model="option.tooltip.trigger"
                              >
                                <option value="item">类目</option>
                                <option value="axis">轴</option>
                              </select>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="7" header="x轴">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>轴名称：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.xAxis.name"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>类型：</td>
                            <td>
                              <select
                                class="form-control"
                                :value="option.xAxis.type"
                                v-model="option.xAxis.type"
                              >
                                <option value="category">图形</option>
                                <option value="value">值</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>名称位置：</td>
                            <td>
                              <button
                                v-on:click="option.xAxis.nameLocation = 'start'"
                                type="button"
                                :class="{
                                  active: option.xAxis.nameLocation == 'start',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-left"></a-icon>
                              </button>
                              <button
                                v-on:click="
                                  option.xAxis.nameLocation = 'middle'
                                "
                                type="button"
                                :class="{
                                  active: option.xAxis.nameLocation == 'middle',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-center"></a-icon>
                              </button>
                              <button
                                v-on:click="option.xAxis.nameLocation = 'end'"
                                type="button"
                                :class="{
                                  active: option.xAxis.nameLocation == 'end',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                <a-icon type="align-right"></a-icon>
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>倾斜度：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.xAxis.axisLabel.rotate"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.axisLabel.rotate =
                                        option.xAxis.axisLabel.rotate + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.axisLabel.rotate =
                                        option.xAxis.axisLabel.rotate - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>名称字号：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.xAxis.nameTextStyle.fontSize"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.nameTextStyle.fontSize =
                                        option.xAxis.nameTextStyle.fontSize + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.nameTextStyle.fontSize =
                                        option.xAxis.nameTextStyle.fontSize - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>

                          <tr>
                            <td>字体颜色：</td>
                            <td>
                              <eip-color
                                :value="option.xAxis.axisLabel.lineStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.xAxis.axisLabel.lineStyle.color =
                                      value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>
                          <tr>
                            <td>分割线显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.xAxis.splitLine.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>分割线类型：</td>
                            <td>
                              <select
                                class="form-control"
                                :value="option.xAxis.splitLine.lineStyle.type"
                                v-model="option.xAxis.splitLine.lineStyle.type"
                              >
                                <option value="solid">实线</option>
                                <option value="dashed">虚线</option>
                                <option value="dotted">点线</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>分割线线宽：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="
                                    option.xAxis.splitLine.lineStyle.width
                                  "
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.splitLine.lineStyle.width =
                                        option.xAxis.splitLine.lineStyle.width +
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.splitLine.lineStyle.width =
                                        option.xAxis.splitLine.lineStyle.width -
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>线条颜色：</td>
                            <td>
                              <eip-color
                                :value="option.xAxis.axisLine.lineStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.xAxis.axisLine.lineStyle.color =
                                      value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>

                          <tr>
                            <td>线条粗细：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="
                                    option.xAxis.axisLine.lineStyle.width
                                  "
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.axisLine.lineStyle.width =
                                        option.xAxis.axisLine.lineStyle.width +
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    v-on:click="
                                      option.xAxis.axisLine.lineStyle.width =
                                        option.xAxis.axisLine.lineStyle.width -
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>

                  <a-collapse-panel key="8" header="y轴">
                    <div class="optionbg">
                      <table>
                        <tbody>
                          <tr>
                            <td>轴名称：</td>
                            <td>
                              <input
                                type="text"
                                class="form-control"
                                v-model="option.yAxis.name"
                              />
                            </td>
                          </tr>
                          <tr>
                            <td>类型：</td>
                            <td>
                              <select
                                class="form-control"
                                :value="option.yAxis.type"
                                v-model="option.yAxis.type"
                              >
                                <option value="category">图形</option>
                                <option value="value">值</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>名称位置：</td>
                            <td>
                              <button
                                @click="option.yAxis.nameLocation = 'end'"
                                type="button"
                                :class="{
                                  active: option.yAxis.nameLocation == 'end',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                上
                              </button>
                              <button
                                @click="option.yAxis.nameLocation = 'center'"
                                type="button"
                                :class="{
                                  active: option.yAxis.nameLocation == 'center',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                中
                              </button>
                              <button
                                @click="option.yAxis.nameLocation = 'start'"
                                type="button"
                                :class="{
                                  active: option.yAxis.nameLocation == 'start',
                                }"
                                class="btn btn-default btn-xs"
                              >
                                下
                              </button>
                            </td>
                          </tr>
                          <tr>
                            <td>名称字号：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="option.yAxis.nameTextStyle.fontSize"
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.yAxis.nameTextStyle.fontSize =
                                        option.yAxis.nameTextStyle.fontSize + 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.yAxis.nameTextStyle.fontSize =
                                        option.yAxis.nameTextStyle.fontSize - 1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>文本颜色：</td>
                            <td>
                              <eip-color
                                :value="option.yAxis.axisLabel.lineStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.yAxis.axisLabel.lineStyle.color =
                                      value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>
                          <tr>
                            <td>分割线显示：</td>
                            <td>
                              <a-checkbox
                                v-model="option.yAxis.splitLine.show"
                              ></a-checkbox>
                            </td>
                          </tr>
                          <tr>
                            <td>分割线类型：</td>
                            <td>
                              <select
                                class="form-control"
                                :value="option.yAxis.splitLine.lineStyle.type"
                                v-model="option.yAxis.splitLine.lineStyle.type"
                              >
                                <option value="solid">实线</option>
                                <option value="dashed">虚线</option>
                                <option value="dotted">点线</option>
                              </select>
                            </td>
                          </tr>
                          <tr>
                            <td>分割线线宽：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="
                                    option.yAxis.splitLine.lineStyle.width
                                  "
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.yAxis.splitLine.lineStyle.width =
                                        option.yAxis.splitLine.lineStyle.width +
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.yAxis.splitLine.lineStyle.width =
                                        option.yAxis.splitLine.lineStyle.width -
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                          <tr>
                            <td>线条颜色：</td>
                            <td>
                              <eip-color
                                :value="option.yAxis.axisLine.lineStyle.color"
                                :showClear="true"
                                @change="
                                  (value) => {
                                    option.yAxis.axisLine.lineStyle.color =
                                      value;
                                  }
                                "
                              ></eip-color>
                            </td>
                          </tr>

                          <tr>
                            <td>线条粗细：</td>
                            <td>
                              <div class="input-number">
                                <input
                                  type="number"
                                  class="inline"
                                  v-model="
                                    option.yAxis.axisLine.lineStyle.width
                                  "
                                />
                                <div class="btn-group-vertical">
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.yAxis.axisLine.lineStyle.width =
                                        option.yAxis.axisLine.lineStyle.width +
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                  <div
                                    type="button"
                                    class="btn btn-xs"
                                    @click="
                                      option.yAxis.axisLine.lineStyle.width =
                                        option.yAxis.axisLine.lineStyle.width -
                                        1
                                    "
                                  >
                                    <span class="caret"></span>
                                  </div>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>
<script>
import "../designer.css";
import Vue from "vue";
import { businessDataFormSource } from "@/services/system/zerocode/run/edit";
import { findById } from "@/services/system/datasource/edit";
export default {
  name: "report-unit-bar",
  data() {
    return {
      height: this.eipTableHeight() - 86 + "px",
      option: {
        title: {
          text: "",
          show: true,
          left: "left",
          textStyle: {
            color: "#000000",
            fontSize: 18,
            fontFamily: "微软雅黑",
            fontWeight: "bold",
          },
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { show: true },
            restore: { show: true },
            dataZoom: { show: true },
            saveAsImage: { show: true },
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: { backgroundColor: "#6a7985" },
            type: "shadow",
          },
        },
        other: {
          areaStyle: true,
          smooth: true,
        },
        dataZoom: {
          show: true,
          realtime: false,
          start: 0,
          end: 100,
        },
        legend: {
          top: "top",
          show: true,
          textStyle: {
            color: "#000",
          },
          orient: "horizontal",
          left: "center",
          data: [
            "直接访问",
            "邮件营销",
            "联盟广告",
            "视频广告",
            "搜索引擎",
            "百度",
            "谷歌",
            "必应",
            "其他",
          ],
        },
        grid: {
          left: 80,
          right: 20,
          bottom: 40,
          top: 40,
          containLabel: true,
        },
        xAxis: {
          nameLocation: "middle",
          name: "",
          nameGap: 25,
          nameTextStyle: {
            fontSize: 12,
            color: "#000",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000",
              width: 1,
            },
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "solid",
              width: 1,
            },
          },
          axisLabel: {
            rotate: 0,
            show: true,
            lineStyle: {
              color: "#000",
            },
            textStyle: {
              color: "#000",
            },
          },
          type: "category",
          data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        },
        yAxis: {
          nameLocation: "center",
          name: "流程发起数量(个)",
          nameGap: 50,
          nameTextStyle: {
            fontSize: 12,
            color: "#000",
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#000",
              width: 1,
            },
          },
          axisLabel: {
            show: true,
            formatter: "{value}",
            lineStyle: {
              color: "#000",
            },
            textStyle: {
              color: "#000",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dotted",
              width: 1,
            },
          },
          position: "left",
          type: "value",
        },
        series: [
          {
            name: "直接访问",
            type: "bar",
            data: [320, 332, 301, 334, 390, 330, 320],
          },
          {
            name: "邮件营销",
            type: "bar",
            stack: "广告",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "联盟广告",
            type: "bar",
            stack: "广告",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
          {
            name: "视频广告",
            type: "bar",
            stack: "广告",
            data: [150, 232, 201, 154, 190, 330, 410],
          },
          {
            name: "搜索引擎",
            type: "bar",
            data: [862, 1018, 964, 1026, 1679, 1600, 1570],
          },
          {
            name: "百度",
            type: "bar",
            barWidth: 5,
            data: [620, 732, 701, 734, 1090, 1130, 1120],
          },
          {
            name: "谷歌",
            type: "bar",
            data: [120, 132, 101, 134, 290, 230, 220],
          },
          {
            name: "必应",
            type: "bar",
            data: [60, 72, 71, 74, 190, 130, 110],
          },
          {
            name: "其他",
            type: "bar",
            data: [62, 82, 91, 84, 109, 110, 120],
          },
        ],
      },
      echarts: null,
      loadComplate: false,
    };
  },
  props: {
    //数据源
    dataSource: {
      type: Object,
    },
  },
  mounted() {
    this.initEchart();
  },
  watch: {
    option: {
      handler: function (val, oldVal) {
        if (this.loadComplate) {
          this.echarts.setOption(val, true);
          this.$emit("change", val);
        }
      },
      deep: true,
    },
  },
  methods: {
    /**
     *
     */
    async initEchart() {
      if (!this.$echarts) {
        Vue.prototype.$echarts = window.echarts;
      }
      this.echarts = this.$echarts.init(this.$refs.eipContainer);
      if (this.dataSource.option) {
        this.option = this.dataSource.option;
      }
      //判断是否具有数据源
      await this.initLegend();
      if (this.option.xAxis.type == "category") {
        await this.initX();
      }
      if (this.option.yAxis.type == "category") {
        await this.initY();
      }

      await this.initValue();
      this.echarts.setOption(this.option, true);
      this.loadComplate = true;
    },

    /**
     * 初始化Legend
     */
    async initLegend() {
      var legend = this.dataSource.legend;
      var data = [];
      if (legend) {
        var result = await this.findDataSource(legend);
        result.forEach((item) => {
          data.push(item.name);
        });
      }
      this.option.legend.data = data;
    },

    /**
     * 初始化x轴
     */
    async initX() {
      var x = this.dataSource.x;
      var data = [];
      if (x) {
        var result = await this.findDataSource(x);
        result.forEach((item) => {
          data.push(item.name);
        });
      }
      this.option.xAxis.data = data;
    },

    /**
     * 初始化x轴
     */
    async initY() {
      var x = this.dataSource.x;
      var data = [];
      if (x) {
        var result = await this.findDataSource(x);
        result.forEach((item) => {
          data.push(item.name);
        });
      }
      this.option.yAxis.data = data;
    },
    /**
     * 初始化数据源
     */
    async initValue() {
      var value = this.dataSource.value;
      var data = [];
      if (value) {
        var datas = await this.findDataSource(value);
        //若有legend
        let that = this;
        if (this.option.legend.data.length > 0) {
          this.option.legend.data.forEach(function (item, i) {
            var sdata = [];
            //x轴
            that.option.xAxis.data.forEach(function (itemj, j) {
              //便利数据
              var value = 0;
              datas.forEach(function (iteml, l) {
                if (iteml.name == itemj && iteml.legend == item) {
                  value = iteml.value;
                  return false;
                }
              });
              if (that.dataSource.xAxiscolor) {
                sdata.push({
                  value: value,
                  itemStyle: {
                    color: that.dataSource.xAxiscolor.split(",")[j],
                  },
                });
              } else {
                sdata.push(value);
              }
            });
            var type = "bar";
            var d = {
              name: item,
              type: type,
              data: sdata,
            };
            data.push(d);
          });
        } else {
          var sdata = [];
          this.option.xAxis.data.forEach(function (itemj, j) {
            var value = 0;
            datas.forEach(function (iteml, l) {
              if (iteml.name == itemj) {
                value = iteml.value;
                return false;
              }
            });
            if (that.dataSource.xAxiscolor) {
              sdata.push({
                value: value,
                itemStyle: {
                  color: that.dataSource.xAxiscolor.split(",")[j],
                },
              });
            } else {
              sdata.push(value);
            }
          });

          var d = {
            type: "bar",
            label: {
              show: true,
              position: "top",
              color: "#000",
            },
            data: sdata,
          };
          data.push(d);
        }
      }
      this.option.series = data;
    },

    /**
     * 获取数据
     * @param {*} id
     */
    async findDataSource(id) {
      var dataSource = await findById(id);
      var result = [];
      if (dataSource.data.config) {
        var config = JSON.parse(dataSource.data.config);
        switch (config.type) {
          case "table":
            var tableData = await businessDataFormSource({
              dataSourceId: dataSource.data.dataSourceId,
              inParams: JSON.stringify(config.inParams),
            });
            result = tableData.data;
            break;
          case "view":
            var viewData = await businessDataFormSource({
              dataSourceId: dataSource.data.dataSourceId,
              inParams: JSON.stringify(config.inParams),
            });
            result = viewData.data;
            break;
          case "proc":
            break;
          case "interface":
            break;
          case "custom":
            result = JSON.parse(config.custom);
            break;
        }
      }
      return result;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .ant-collapse-content-box {
  padding: 0 !important;
}

/deep/ .ant-collapse-content {
  border-top: 0 !important;
}

/deep/ .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  padding: 6px 16px !important;
  padding-left: 40px !important;
}

/deep/ .m-colorPicker .box {
  position: fixed !important;
}
</style>